<template>
  <el-form ref="form" :model="pageData" :rules="rules" label-width="80px">
    <el-form-item label="所属专题" prop="subjectName">
      <el-input v-model="pageData.subjectName"></el-input>
    </el-form-item>
    <el-form-item label="选择图片">
      <el-upload
        v-model:file-list="fileList"
        list-type="picture-card"
        multiple
        accept="image/png,image/jpeg"
        :auto-upload="false"
      >
        <el-icon><Plus /></el-icon>
      </el-upload>
    </el-form-item>
    <el-form-item label="处理进度" v-if="actionIndex >= 0 && fileList.length > 0">
      {{((actionIndex / fileList.length) * 100).toFixed(2)}}%
    </el-form-item>
  </el-form>
</template>

<script>
/**
 Author: 蒋鑫强
 Time: 2023/6/2
 Description:
 */
import DialogShowComponent from '@/components/js/DialogShowComponent.js';
import { Plus } from '@element-plus/icons-vue'
import imgZip from '@/native/imgZip';
import db from '@/util/db';
import util, {DateUtil} from '@/util/util';

export default {
  name: 'imgZipDetail',

  components: {
    Plus
  },

  mixins: [DialogShowComponent],

  data() {
    return {
      fileList: [],
      pageData: {
        subjectName: ''
      },

      actionIndex: 0,

      rules: {
        subjectName: [{required: true,message: '请输入所属专题名称',trigger: 'change'}]
      }
    };
  },

  methods: {
    doSubmit() {
      return new Promise((resolve, reject) => {
        this.$refs.form.validate(valid => {
          if (valid) {
            this.fileList.forEach(async d => {
              const result = await imgZip.zip(d);
              await db.setItem('imgZip', {
                ...result,
                id: util.getRandomStr(10),
                ...this.pageData
              });
              this.actionIndex += 1;
              if (this.actionIndex >= this.fileList.length) {
                resolve();
              }
            });
          } else {
            reject();
          }
        });
      });
    }
  }
}
</script>

<style scoped>

</style>
